import React, { useEffect, useState } from 'react';
import type { Theme, SxProps, Breakpoint } from '@mui/material/styles';
import Box from '@mui/material/Box';
import ListItem from '@mui/material/ListItem';
import { useTheme } from '@mui/material/styles';
import ListItemButton from '@mui/material/ListItemButton';
import Drawer, { drawerClasses } from '@mui/material/Drawer';
import { usePathname, useRouter } from 'src/routes/hooks';
import { RouterLink } from 'src/routes/components';
import { varAlpha } from 'src/theme/styles';
import { Logo } from 'src/components/logo';
import { Scrollbar } from 'src/components/scrollbar';
import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
import Typography from '@mui/material/Typography';
import { Tab, Tabs, TextField, useMediaQuery, Snackbar, Alert, Collapse, FormControl, Select, MenuItem } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { RowsInterface } from '../../sections/product/detail-data';
import { saveCashBook } from '../../api/cash-book';
import { MessageBox } from '../../components/Snackbar/message-box';
import { input_fields } from './data';
import { Iconify } from 'src/components/iconify';
import { InputAdornment } from '@mui/material';

// 账单类型定义
const BILL_TYPES = [
  // 收入类型
  { code: 'INCOME', name: '收入', isIncome: true },
  { code: 'SALARY', name: '工资', isIncome: true },
  { code: 'BONUS', name: '奖金', isIncome: true },
  { code: 'INVESTMENT', name: '投资收益', isIncome: true },
  { code: 'REFUND', name: '退款', isIncome: true },
  { code: 'PART_TIME', name: '兼职收入', isIncome: true },
  { code: 'BUSINESS', name: '经营收入', isIncome: true },
  { code: 'RENTAL', name: '租金收入', isIncome: true },
  { code: 'INTEREST', name: '利息收入', isIncome: true },
  { code: 'DIVIDEND', name: '分红收入', isIncome: true },
  { code: 'GIFT', name: '礼金收入', isIncome: true },
  { code: 'OTHER_INCOME', name: '其他收入', isIncome: true },
  
  // 支出类型
  { code: 'EXPENSE', name: '支出', isIncome: false },
  { code: 'FOOD', name: '餐饮', isIncome: false },
  { code: 'TRANSPORT', name: '交通', isIncome: false },
  { code: 'SHOPPING', name: '购物', isIncome: false },
  { code: 'ENTERTAINMENT', name: '娱乐', isIncome: false },
  { code: 'HOUSING', name: '住房', isIncome: false },
  { code: 'UTILITIES', name: '水电费', isIncome: false },
  { code: 'MEDICAL', name: '医疗', isIncome: false },
  { code: 'EDUCATION', name: '教育', isIncome: false },
  { code: 'INSURANCE', name: '保险', isIncome: false },
  { code: 'INVESTMENT_EXPENSE', name: '投资支出', isIncome: false },
  { code: 'OTHER_EXPENSE', name: '其他支出', isIncome: false },
];

const PAYMENT_WAYS = [
  '现金',
  '银行卡',
  '微信支付',
  '支付宝',
  '银行转账',
  '其他'
];

const INCOME_SOURCES = [
  '工资收入',
  '奖金收入',
  '投资收益',
  '兼职收入',
  '经营收入',
  '租金收入',
  '利息收入',
  '分红收入',
  '礼金收入',
  '退款收入',
  '其他收入'
];

// 获取字段图标的辅助函数
const getFieldIcon = (fieldName: string) => {
  const iconMap: { [key: string]: string } = {
    amount: 'eva:credit-card-fill',
    consumerDate: 'eva:calendar-fill',
    payUserName: 'eva:person-fill',
    forUserName: 'eva:person-add-fill',
    payPlat: 'eva:smartphone-fill',
    payWay: 'eva:credit-card-outline',
    recipient: 'eva:people-fill',
    remark: 'eva:edit-fill',
    billType: 'eva:file-text-fill',
  };
  return <Iconify icon={iconMap[fieldName] || 'eva:help-circle-fill'} sx={{ color: 'primary.main' }} />;
};

import { login, register } from '../../api/user-api';
import { usePaymentWays, useIncomeSources } from 'src/hooks/use-dict';

// ----------------------------------------------------------------------

export type NavContentProps = {
  data: {
    path: string;
    title: string;
    icon: React.ReactNode;
    info?: React.ReactNode;
    children?: {
      path: string;
      title: string;
      icon: React.ReactNode;
    }[];
  }[];
  slots?: {
    topArea?: React.ReactNode;
    bottomArea?: React.ReactNode;
  };
  sx?: SxProps<Theme>;
};

export function NavDesktop({
  sx,
  data,
  slots,
  layoutQuery,
}: NavContentProps & { layoutQuery: Breakpoint }) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        pt: 2.5,
        px: 2.5,
        zIndex: 2000,
        top: 0,
        left: 0,
        height: 1,
        display: 'none',
        position: 'fixed',
        flexDirection: 'column',
        bgcolor: 'var(--layout-nav-bg)',
        width: 'var(--layout-nav-vertical-width)',
        borderRight: `1px solid var(--layout-nav-border-color, ${varAlpha(theme.vars.palette.grey['500Channel'], 0.12)})`,
        [theme.breakpoints.up(layoutQuery)]: {
          display: 'flex',
        },
        ...sx,
      }}
    >
      <NavContent data={data} slots={slots} />
    </Box>
  );
}

// ----------------------------------------------------------------------

export function NavMobile({
  sx,
  data,
  open,
  slots,
  onClose,
}: NavContentProps & { open: boolean; onClose: () => void }) {
  const pathname = usePathname();

  useEffect(() => {
    if (open) {
      onClose();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pathname]);

  return (
    <Drawer
      open={open}
      onClose={onClose}
      sx={{
        [`& .${drawerClasses.paper}`]: {
          pt: 2.5,
          px: 2.5,
          overflow: 'unset',
          bgcolor: 'var(--layout-nav-bg)',
          width: 'var(--layout-nav-mobile-width)',
          ...sx,
        },
      }}
    >
      <NavContent data={data} slots={slots} />
    </Drawer>
  );
}

// ----------------------------------------------------------------------

const initialFormValues: RowsInterface = {
  consumerDate: new Date().toISOString().split('T')[0], // 修复：使用字符串格式的日期
  amount: '',
  payUserName: '',
  forUserName: '',
  remark: '',
  id: '',
  payPlat: '',
  payWay: '',
  index: 0,
};

export function NavContent({ data, slots, sx }: NavContentProps) {
  const pathname = usePathname();
  const router = useRouter();
  const [expandedMenus, setExpandedMenus] = useState<{ [key: string]: boolean }>({});

  // 使用字典数据
  const { data: paymentWays } = usePaymentWays();
  const { data: incomeSources } = useIncomeSources();

  const defaultDate = new Date().toISOString().split('T')[0];
  const [openDrawer, setOpenDrawer] = useState(false);
  const [formValues, setFormValues] = useState<{ [key: string]: string | undefined }>({
    consumerDate: defaultDate, // 默认日期设置为当前日期
  });

  const [severity, setSeverity] = useState<'success' | 'error' | 'info' | 'warning'>('error');

  const [showMessage, setShowMessage] = useState(false);
  const [message, setMessage] = useState('');
  const [activeTab, setActiveTab] = useState(0);
  const [errors, setErrors] = useState<{ [key: string]: string }>({}); // 修复：使用正确的错误类型
  const isDesk = useMediaQuery('(min-width:1200px)');
  const [submitStatus, setSubmitStatus] = useState(false);

  const handleDrawerOpen = () => {
      setOpenDrawer(!openDrawer)
      setSubmitStatus(false);
  };
  const handleDrawerClose = () => setOpenDrawer(false);

  const handleTabChange = (event: any, newValue: number) => {
    setActiveTab(newValue);
  };

  const onClose = () => {
    setShowMessage(false);
  };
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormValues((prev) => ({
      ...prev,
      [name]: value, // 仅更新表单字段的值
    }));
  };

  const handleSubmit = () => {
    const newErrors: any = {};
    
    // 通用字段验证
    if (!formValues.amount) {
      newErrors.amount = '消费金额是必填项';
    }
    if (!formValues.consumerDate) {
      newErrors.consumerDate = '消费时间是必填项';
    }
    if (!formValues.remark) {
      newErrors.remark = '消费备注是必填项';
    }
    
    // 根据Tab验证不同字段
    if (activeTab === 0) {
      // 支出记录验证
      if (!formValues.payUserName) {
        newErrors.payUserName = '支付人员是必填项';
      }
      if (!formValues.payWay) {
        newErrors.payWay = '支付方式是必填项';
      }
    } else {
      // 收入记录验证
      if (!formValues.forUserName) {
        newErrors.forUserName = '收款人是必填项';
      }
      if (!formValues.payPlat) {
        newErrors.payPlat = '收入来源是必填项';
      }
    }
    
    setErrors(newErrors);

    if (Object.keys(newErrors).length === 0) {
      // 只有在没有错误时才进行提交
      saveCashBook(formValues)
        .then((r) => {
          setSubmitStatus(true);
          setMessage('账单新增成功');
          setShowMessage(true);
          setSeverity('success');
          setTimeout(() => {
            setOpenDrawer(false); // 关闭抽屉
            setFormValues({ consumerDate: defaultDate });
          }, 1000);
        })
        .catch((error) => {
          // 处理提交失败的情况
          setMessage('提交失败');
          setShowMessage(true);
        })
        .finally(() => {});

      return;
    }
    setMessage('带星号的字段不能为空!');
    setSeverity('error');
    setShowMessage(true);
  };

  const handleMenuToggle = (menuTitle: string) => {
    setExpandedMenus(prev => ({
      ...prev,
      [menuTitle]: !prev[menuTitle]
    }));
  };

  const isMenuActive = (item: any) => {
    if (item.path === pathname) return true;
    if (item.children) {
      return item.children.some((child: any) => child.path === pathname);
    }
    return false;
  };

  const isChildActive = (children: any[]) => {
    return children.some(child => child.path === pathname);
  };

  // @ts-ignore
  // @ts-ignore
  return (
    <>
      <Logo />
      {slots?.topArea}
      <>
        <Box
          sx={{
            pl: 2,
            py: 3,
            gap: 1,
            pr: 1.5,
            width: 1,
            borderRadius: 1.8,
            textAlign: 'left',
            justifyContent: 'flex-start',
            ...sx,
          }}
        >
          <Button
            variant="outlined"
            startIcon={<AddIcon />}
            sx={{
              width: '200px',
              fontSize: '16px',
              fontFamily: "'Arial', sans-serif",
              textTransform: 'none',
            }}
            onClick={handleDrawerOpen} // 点击按钮时打开抽屉
          >
            <Typography variant="h6">记一笔</Typography>
          </Button>
        </Box>
      </>

      <Scrollbar fillContent>
        <Box component="nav" display="flex" flex="1 1 auto" flexDirection="column" sx={sx}>
          <Box component="ul" gap={0.5} display="flex" flexDirection="column">
            {data.map((item) => {
              const isActived = isMenuActive(item);
              const hasChildren = item.children && item.children.length > 0;
              const isExpanded = expandedMenus[item.title] || false;
              const isChildMenuActive = hasChildren && item.children && isChildActive(item.children);

              return (
                <Box key={item.title}>
                  <ListItem disableGutters disablePadding>
                    <ListItemButton
                      disableGutters
                      component={hasChildren ? 'div' : RouterLink}
                      href={hasChildren ? undefined : item.path}
                      onClick={hasChildren ? () => handleMenuToggle(item.title) : undefined}
                      sx={{
                        pl: 2.5,
                        py: 1.5,
                        gap: 2,
                        pr: 2,
                        borderRadius: 1,
                        typography: 'body2',
                        fontWeight: 'fontWeightMedium',
                        color: 'var(--layout-nav-item-color)',
                        minHeight: 'var(--layout-nav-item-height)',
                        mb: 0.5,
                        ...(isActived && {
                          fontWeight: 'fontWeightSemiBold',
                          bgcolor: 'var(--layout-nav-item-active-bg)',
                          color: 'var(--layout-nav-item-active-color)',
                          '&:hover': {
                            bgcolor: 'var(--layout-nav-item-hover-bg)',
                          },
                        }),
                      }}
                    >
                      <Box component="span" sx={{ width: 24, height: 24 }}>
                        {item.icon}
                      </Box>

                      <Box component="span" flexGrow={1}>
                        {item.title}
                      </Box>

                      {hasChildren && (
                        <Box component="span">
                          {isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
                        </Box>
                      )}

                      {item.info && item.info}
                    </ListItemButton>
                  </ListItem>

                  {/* 子菜单 */}
                  {hasChildren && (
                    <Collapse in={isExpanded} timeout="auto" unmountOnExit>
                      <Box component="ul" sx={{ pl: 3, gap: 1.5 }} display="flex" flexDirection="column">
                        {item.children?.map((child) => {
                          const isChildActived = child.path === pathname;
                          return (
                            <ListItem disableGutters disablePadding key={child.title}>
                              <ListItemButton
                                disableGutters
                                component={RouterLink}
                                href={child.path}
                                sx={{
                                  pl: 2.5,
                                  py: 1.25,
                                  gap: 2,
                                  pr: 2,
                                  borderRadius: 1,
                                  typography: 'body2',
                                  fontWeight: 'fontWeightMedium',
                                  color: 'var(--layout-nav-item-color)',
                                  minHeight: 'var(--layout-nav-item-height)',
                                  fontSize: '0.875rem',
                                  mb: 0.5,
                                  ...(isChildActived && {
                                    fontWeight: 'fontWeightSemiBold',
                                    bgcolor: 'var(--layout-nav-item-active-bg)',
                                    color: 'var(--layout-nav-item-active-color)',
                                    '&:hover': {
                                      bgcolor: 'var(--layout-nav-item-hover-bg)',
                                    },
                                  }),
                                }}
                              >
                                <Box component="span" sx={{ width: 20, height: 20 }}>
                                  {child.icon}
                                </Box>

                                <Box component="span" flexGrow={1}>
                                  {child.title}
                                </Box>
                              </ListItemButton>
                            </ListItem>
                          );
                        })}
                      </Box>
                    </Collapse>
                  )}
                </Box>
              );
            })}
          </Box>
        </Box>
      </Scrollbar>

      {slots?.bottomArea}
      <Drawer
        open={openDrawer}
        variant="temporary"
        anchor="left"
        ModalProps={{
          keepMounted: true,
        }}
        sx={{
          zIndex: 1000,
          position: 'fixed',
          [`& .MuiBackdrop-root`]: {
            backgroundColor: 'rgba(0, 0, 0, 0.4)',
          },
          [`& .MuiDrawer-paper`]: {
            width: isDesk ? '35%' : '85%',
            height: '100%',
            left: isDesk ? 300 : 0,
            padding: 0,
            boxSizing: 'border-box',
            backgroundColor: '#fafafa',
            display: 'flex',
            flexDirection: 'column',
            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.12)',
          },
        }}
      >
        {/* 头部区域 */}
        <Box
          sx={{
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            color: 'white',
            p: 3,
            position: 'relative',
            overflow: 'hidden',
          }}
        >
          {/* 装饰性背景元素 */}
          <Box
            sx={{
              position: 'absolute',
              top: -20,
              right: -20,
              width: 100,
              height: 100,
              borderRadius: '50%',
              background: 'rgba(255, 255, 255, 0.1)',
            }}
          />
          <Box
            sx={{
              position: 'absolute',
              bottom: -30,
              left: -30,
              width: 80,
              height: 80,
              borderRadius: '50%',
              background: 'rgba(255, 255, 255, 0.08)',
            }}
          />
          
          {/* 关闭按钮 */}
          <IconButton
            onClick={handleDrawerClose}
            sx={{
              position: 'absolute',
              top: 16,
              right: 16,
              color: 'white',
              backgroundColor: 'rgba(255, 255, 255, 0.2)',
              '&:hover': {
                backgroundColor: 'rgba(255, 255, 255, 0.3)',
              },
            }}
          >
            <CloseIcon />
          </IconButton>

          {/* 标题区域 */}
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
            <Box
              sx={{
                width: 48,
                height: 48,
                borderRadius: '50%',
                backgroundColor: 'rgba(255, 255, 255, 0.2)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <AddIcon sx={{ fontSize: 24 }} />
            </Box>
            <Box>
              <Typography variant="h5" sx={{ fontWeight: 'bold', mb: 0.5 }}>
                记一笔
              </Typography>
              <Typography variant="body2" sx={{ opacity: 0.9 }}>
                记录您的每一笔消费
              </Typography>
            </Box>
          </Box>
        </Box>

        {/* 表单区域 */}
        <Box sx={{ flex: 1, p: 3, overflow: 'auto' }}>
          <Tabs
            value={activeTab}
            onChange={handleTabChange}
            indicatorColor="primary"
            textColor="primary"
            sx={{
              mb: 3,
              '& .MuiTab-root': {
                minHeight: 48,
                fontSize: '16px',
                fontWeight: 600,
              },
            }}
          >
            <Tab 
              label="支出记录" 
              icon={<Iconify icon="eva:trending-down-fill" />}
              iconPosition="start"
            />
            <Tab 
              label="收入记录" 
              icon={<Iconify icon="eva:trending-up-fill" />}
              iconPosition="start"
            />
          </Tabs>

          {activeTab === 0 && (
            <Box
              sx={{
                display: 'flex',
                flexDirection: 'column',
                gap: 3,
              }}
            >
              {/* 金额输入 - 特殊样式 */}
              <Box sx={{ position: 'relative' }}>
                <Typography
                  sx={{
                    mb: 1.5,
                    fontWeight: 600,
                    color: 'text.primary',
                    fontSize: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                  }}
                >
                  <Iconify icon="eva:credit-card-fill" sx={{ color: 'primary.main' }} />
                  消费金额
                  <Typography
                    component="span"
                    sx={{ color: 'error.main', fontSize: '18px' }}
                  >
                    *
                  </Typography>
                </Typography>
                <TextField
                  fullWidth
                  variant="outlined"
                  required
                  type="number"
                  placeholder="0.00"
                  value={formValues.amount || ''}
                  onChange={handleInputChange}
                  name="amount"
                  error={!!errors.amount}
                  helperText={errors.amount}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <Typography variant="h6" sx={{ color: 'text.secondary' }}>
                          ¥
                        </Typography>
                      </InputAdornment>
                    ),
                  }}
                  sx={{
                    backgroundColor: 'white',
                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                    borderRadius: 2,
                    '& .MuiOutlinedInput-root': {
                      height: 56,
                      fontSize: '18px',
                      fontWeight: 600,
                      '&.Mui-focused': {
                        boxShadow: '0 0 0 2px rgba(102, 126, 234, 0.2)',
                      },
                    },
                  }}
                />
              </Box>

              {/* 其他字段 */}
              {/* 消费时间 */}
              <Box>
                <Typography
                  sx={{
                    mb: 1.5,
                    fontWeight: 600,
                    color: 'text.primary',
                    fontSize: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                  }}
                >
                  <Iconify icon="eva:calendar-fill" sx={{ color: 'primary.main' }} />
                  消费时间
                  <Typography
                    component="span"
                    sx={{ color: 'error.main', fontSize: '18px' }}
                  >
                    *
                  </Typography>
                </Typography>
                <TextField
                  fullWidth
                  variant="outlined"
                  required
                  type="date"
                  value={formValues.consumerDate || ''}
                  onChange={handleInputChange}
                  name="consumerDate"
                  error={!!errors.consumerDate}
                  helperText={errors.consumerDate}
                  sx={{
                    backgroundColor: 'white',
                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                    borderRadius: 2,
                    '& .MuiOutlinedInput-root': {
                      height: 48,
                      '&.Mui-focused': {
                        boxShadow: '0 0 0 2px rgba(102, 126, 234, 0.2)',
                      },
                    },
                  }}
                />
              </Box>

              {/* 支付人员 */}
              <Box>
                <Typography
                  sx={{
                    mb: 1.5,
                    fontWeight: 600,
                    color: 'text.primary',
                    fontSize: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                  }}
                >
                  <Iconify icon="eva:person-fill" sx={{ color: 'primary.main' }} />
                  支付人员
                  <Typography
                    component="span"
                    sx={{ color: 'error.main', fontSize: '18px' }}
                  >
                    *
                  </Typography>
                </Typography>
                <TextField
                  fullWidth
                  variant="outlined"
                  required
                  placeholder="请输入支付人"
                  value={formValues.payUserName || ''}
                  onChange={handleInputChange}
                  name="payUserName"
                  error={!!errors.payUserName}
                  helperText={errors.payUserName}
                  sx={{
                    backgroundColor: 'white',
                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                    borderRadius: 2,
                    '& .MuiOutlinedInput-root': {
                      height: 48,
                      '&.Mui-focused': {
                        boxShadow: '0 0 0 2px rgba(102, 126, 234, 0.2)',
                      },
                    },
                  }}
                />
              </Box>

              {/* 支付方式 */}
              <Box>
                <Typography
                  sx={{
                    mb: 1.5,
                    fontWeight: 600,
                    color: 'text.primary',
                    fontSize: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                  }}
                >
                  <Iconify icon="eva:credit-card-outline" sx={{ color: 'primary.main' }} />
                  支付方式
                  <Typography
                    component="span"
                    sx={{ color: 'error.main', fontSize: '18px' }}
                  >
                    *
                  </Typography>
                </Typography>
                <FormControl fullWidth>
                  <Select
                    value={formValues.payWay || ''}
                    onChange={(event) => setFormValues({ ...formValues, payWay: event.target.value as string })}
                    name="payWay"
                    variant="outlined"
                    displayEmpty
                    MenuProps={{
                      PaperProps: {
                        sx: {
                          zIndex: 9999,
                          maxHeight: 300,
                        },
                      },
                    }}
                    sx={{
                      backgroundColor: 'white',
                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                      borderRadius: 2,
                      height: 48,
                      '& .MuiOutlinedInput-root': {
                        '&.Mui-focused': {
                          boxShadow: '0 0 0 2px rgba(102, 126, 234, 0.2)',
                        },
                      },
                    }}
                  >
                    <MenuItem value="" disabled>
                      <em>请选择支付方式</em>
                    </MenuItem>
                    {paymentWays.map((way) => (
                      <MenuItem key={way.id} value={way.value}>{way.name}</MenuItem>
                    ))}
                  </Select>
                </FormControl>
              </Box>

              {/* 备注 */}
              <Box>
                <Typography
                  sx={{
                    mb: 1.5,
                    fontWeight: 600,
                    color: 'text.primary',
                    fontSize: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                  }}
                >
                  <Iconify icon="eva:edit-fill" sx={{ color: 'primary.main' }} />
                  消费备注
                  <Typography
                    component="span"
                    sx={{ color: 'error.main', fontSize: '18px' }}
                  >
                    *
                  </Typography>
                </Typography>
                <TextField
                  fullWidth
                  variant="outlined"
                  required
                  multiline
                  rows={3}
                  placeholder="请输入备注"
                  value={formValues.remark || ''}
                  onChange={handleInputChange}
                  name="remark"
                  error={!!errors.remark}
                  helperText={errors.remark}
                  sx={{
                    backgroundColor: 'white',
                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                    borderRadius: 2,
                    '& .MuiOutlinedInput-root': {
                      '&.Mui-focused': {
                        boxShadow: '0 0 0 2px rgba(102, 126, 234, 0.2)',
                      },
                    },
                  }}
                />
              </Box>
            </Box>
          )}

          {activeTab === 1 && (
            <Box
              sx={{
                display: 'flex',
                flexDirection: 'column',
                gap: 3,
              }}
            >
              {/* 金额输入 */}
              <Box sx={{ position: 'relative' }}>
                <Typography
                  sx={{
                    mb: 1.5,
                    fontWeight: 600,
                    color: 'text.primary',
                    fontSize: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                  }}
                >
                  <Iconify icon="eva:credit-card-fill" sx={{ color: 'success.main' }} />
                  收入金额
                  <Typography
                    component="span"
                    sx={{ color: 'error.main', fontSize: '18px' }}
                  >
                    *
                  </Typography>
                </Typography>
                <TextField
                  fullWidth
                  variant="outlined"
                  required
                  type="number"
                  placeholder="0.00"
                  value={formValues.amount || ''}
                  onChange={handleInputChange}
                  name="amount"
                  error={!!errors.amount}
                  helperText={errors.amount}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <Typography variant="h6" sx={{ color: 'success.main' }}>
                          ¥
                        </Typography>
                      </InputAdornment>
                    ),
                  }}
                  sx={{
                    backgroundColor: 'white',
                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                    borderRadius: 2,
                    '& .MuiOutlinedInput-root': {
                      height: 56,
                      fontSize: '18px',
                      fontWeight: 600,
                      '&.Mui-focused': {
                        boxShadow: '0 0 0 2px rgba(76, 175, 80, 0.2)',
                      },
                    },
                  }}
                />
              </Box>

              {/* 日期选择 */}
              <Box>
                <Typography
                  sx={{
                    mb: 1.5,
                    fontWeight: 600,
                    color: 'text.primary',
                    fontSize: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                  }}
                >
                  <Iconify icon="eva:calendar-fill" sx={{ color: 'primary.main' }} />
                  收入日期
                  <Typography
                    component="span"
                    sx={{ color: 'error.main', fontSize: '18px' }}
                  >
                    *
                  </Typography>
                </Typography>
                <TextField
                  fullWidth
                  variant="outlined"
                  required
                  type="date"
                  value={formValues.consumerDate || ''}
                  onChange={handleInputChange}
                  name="consumerDate"
                  error={!!errors.consumerDate}
                  helperText={errors.consumerDate}
                  InputLabelProps={{ shrink: true }}
                  sx={{
                    backgroundColor: 'white',
                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                    borderRadius: 2,
                    '& .MuiOutlinedInput-root': {
                      height: 48,
                      '&.Mui-focused': {
                        boxShadow: '0 0 0 2px rgba(102, 126, 234, 0.2)',
                      },
                    },
                  }}
                />
              </Box>

              {/* 收款人 */}
              <Box>
                <Typography
                  sx={{
                    mb: 1.5,
                    fontWeight: 600,
                    color: 'text.primary',
                    fontSize: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                  }}
                >
                  <Iconify icon="eva:person-add-fill" sx={{ color: 'primary.main' }} />
                  收款人
                  <Typography
                    component="span"
                    sx={{ color: 'error.main', fontSize: '18px' }}
                  >
                    *
                  </Typography>
                </Typography>
                <TextField
                  fullWidth
                  variant="outlined"
                  required
                  placeholder="请输入收款人"
                  value={formValues.forUserName || ''}
                  onChange={handleInputChange}
                  name="forUserName"
                  error={!!errors.forUserName}
                  helperText={errors.forUserName}
                  sx={{
                    backgroundColor: 'white',
                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                    borderRadius: 2,
                    '& .MuiOutlinedInput-root': {
                      height: 48,
                      '&.Mui-focused': {
                        boxShadow: '0 0 0 2px rgba(102, 126, 234, 0.2)',
                      },
                    },
                  }}
                />
              </Box>

              {/* 收入来源 */}
              <Box>
                <Typography
                  sx={{
                    mb: 1.5,
                    fontWeight: 600,
                    color: 'text.primary',
                    fontSize: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                  }}
                >
                  <Iconify icon="eva:smartphone-fill" sx={{ color: 'primary.main' }} />
                  收入来源
                </Typography>
                <FormControl fullWidth>
                  <Select
                    value={formValues.payPlat || ''}
                    onChange={(event) => setFormValues({ ...formValues, payPlat: event.target.value as string })}
                    name="payPlat"
                    variant="outlined"
                    displayEmpty
                    MenuProps={{
                      PaperProps: {
                        sx: {
                          zIndex: 9999,
                          maxHeight: 300,
                        },
                      },
                    }}
                    sx={{
                      backgroundColor: 'white',
                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                      borderRadius: 2,
                      height: 48,
                      zIndex: 9999,
                      '& .MuiOutlinedInput-root': {
                        '&.Mui-focused': {
                          boxShadow: '0 0 0 2px rgba(102, 126, 234, 0.2)',
                        },
                      },
                    }}
                  >
                    <MenuItem value="" disabled>
                      <em>请选择收入来源</em>
                    </MenuItem>
                    {incomeSources.map((source) => (
                      <MenuItem key={source.id} value={source.value}>{source.name}</MenuItem>
                    ))}
                  </Select>
                </FormControl>
              </Box>

              {/* 备注 */}
              <Box>
                <Typography
                  sx={{
                    mb: 1.5,
                    fontWeight: 600,
                    color: 'text.primary',
                    fontSize: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                  }}
                >
                  <Iconify icon="eva:edit-fill" sx={{ color: 'primary.main' }} />
                  备注
                  <Typography
                    component="span"
                    sx={{ color: 'error.main', fontSize: '18px' }}
                  >
                    *
                  </Typography>
                </Typography>
                <TextField
                  fullWidth
                  variant="outlined"
                  required
                  multiline
                  rows={3}
                  placeholder="请输入备注信息"
                  value={formValues.remark || ''}
                  onChange={handleInputChange}
                  name="remark"
                  error={!!errors.remark}
                  helperText={errors.remark}
                  sx={{
                    backgroundColor: 'white',
                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                    borderRadius: 2,
                    '& .MuiOutlinedInput-root': {
                      '&.Mui-focused': {
                        boxShadow: '0 0 0 2px rgba(102, 126, 234, 0.2)',
                      },
                    },
                  }}
                />
              </Box>
            </Box>
          )}
        </Box>

        {/* 底部按钮区域 */}
        <Box
          sx={{
            p: 3,
            borderTop: '1px solid',
            borderColor: 'divider',
            backgroundColor: 'background.paper',
          }}
        >
          <Box
            sx={{
              display: 'flex',
              gap: 2,
            }}
          >
            <Button
              variant="contained"
              fullWidth
              disabled={submitStatus}
              onClick={handleSubmit}
              startIcon={<Iconify icon="eva:checkmark-fill" />}
              sx={{
                height: 48,
                fontSize: '16px',
                fontWeight: 600,
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)',
                '&:hover': {
                  boxShadow: '0 6px 20px rgba(102, 126, 234, 0.6)',
                  transform: 'translateY(-1px)',
                },
                '&:disabled': {
                  background: 'linear-gradient(135deg, #ccc 0%, #999 100%)',
                  boxShadow: 'none',
                  transform: 'none',
                },
              }}
            >
              {submitStatus ? '提交中...' : '提交记录'}
            </Button>
            <Button
              variant="outlined"
              fullWidth
              onClick={handleDrawerClose}
              startIcon={<Iconify icon="eva:close-fill" />}
              sx={{
                height: 48,
                fontSize: '16px',
                fontWeight: 600,
                borderColor: 'text.secondary',
                color: 'text.secondary',
                '&:hover': {
                  borderColor: 'text.primary',
                  color: 'text.primary',
                  backgroundColor: 'action.hover',
                },
              }}
            >
              取消
            </Button>
          </Box>
        </Box>

        {/* 消息提示 */}
        <Box>
          <MessageBox
            message={message}
            showMessage={showMessage}
            onClose={onClose}
            severity={severity}
          />
        </Box>
      </Drawer>
    </>
  );
}
